<template>
    <view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="游记" navbarType='0'></wlk-navbar>
        <block v-if="loadStatus=='nomore' && list.length==0">
            <view class="not-data">
                <u-empty
                        :icon="uEmpty.search"
                        text="没有搜索结果"
                >
                </u-empty>
            </view>
        </block>
        <block v-else>
            <view class="note-list pd30">
                <view class="note-item wd100 bgw pd30 mb20 br04" v-for="(item,index) in list" :key="item.id"  @click="jump('/pages/note/detail?id='+item.id)">
                    <view class="wlkflex justify-between head-info col9">
                        <view>{{$u.timeFormat(item.createtime, 'mm月dd日')}}</view>
                        <view class="wlkflex" @tap.stop="setNoteLike(index)">
                            <u-icon name="heart-fill" v-if="item.hasLike" color="#FF2C3C" size="20"></u-icon>
                            <u-icon name="heart" v-else color="#999999" size="20"></u-icon>
                            <view class="ml05">{{item.like}}</view>
                        </view>
                    </view>
                    <view class="info-name bold u-line-2 mt20 mb20">{{item.name}}</view>
                    <view class="info-auth mb20" :style="'color:'+themeColor">
                        <span class="mr05">#</span>{{item.auth}}
                    </view>
                    <view class="info-img wd100">
                        <image class="wd100 br04" lazy-load :src="item.image"  mode="widthFix"/>
                    </view>
                    <view class="pd20 mt20 line-box br04 wlkflex justify-between"  @tap.stop="jump('/pages/line/detail?id='+item.line.id)">
                        <view class="line-image">
                            <image class="wd100 hg100" :src="item.line.images[0]"  mode="aspectFill"/>
                        </view>
                        <view class="line-info wlkflex wrap align-content-between">
                            <view class="u-line-2 title">{{item.line.title}}</view>
                            <view class="wd100  wlkflex justify-between">
                                <view class="price-info">
                                    <block  v-if="item.line.minprice>0">
                                        <span>￥</span>
                                        <span class="price">{{item.line.minprice}}</span>
                                        <span class="ml05">起</span>
                                    </block>
                                    <block v-else>
                                        <span class="col9">暂无库存</span>
                                    </block>
                                </view>
                                <view class="buy-btn" :style="'background-color:'+themeColor">
                                    预订
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="load-more">
                    <u-loadmore :status="loadStatus" :loading-text="loadingText"  :loadmore-text="loadmoreText" :nomore-text="nomoreText" dashed  line />
                </view>
            </view>
        </block>

    </view>
</template>

<script>
    import { toUrl,formatRichText } from '@/wlkutils/tools';
    import share from "@/wlkutils/share";
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    var _self;
    export default {
        data() {
            return {
                list:[],
                page: 1,
                loadStatus:'loading',
                loadingText: '努力加载中',
                loadmoreText: '轻轻上拉',
                nomoreText: '实在没有了'

            };
        },
        computed: {
            ...mapGetters(['themeColor','uEmpty'])
        },
        onLoad(options) {
            _self = this;
            _self.loadStatus = 'loading';
            _self.page = 1;
            _self.list = [];
            _self.getData();

        },
        onShow() {

        },
        onShareAppMessage(res){
            return share.setShareInfo();
        },
        onReachBottom() {
            if(this.loadStatus == "nomore"){
                return;
            }
            this.page++;
            this.getData();
        },
        methods: {
            async getData() {
                const res = await uni.$u.http.post("note/getList", {
                    page: this.page,
                });
                if (res && res.data && res.data.rows) {
                    this.list = this.list.concat(res.data.rows);
                }
                this.loadStatus = res.data.rows.length < res.data.limit ? 'nomore' : 'loadmore';
            },
            async setNoteLike(index) {
                let res = await uni.$u.http.post('note/setNoteLike', {
                    id:this.list[index].id,
                    type:this.list[index].hasLike?'del':'insert'
                });
                if(res){
                    uni.$u.toast(res.msg);
                    this.list[index].hasLike = !this.list[index].hasLike;
                    this.list[index].like += this.list[index].hasLike?1:-1;
                }
            },
            jump(path){
                toUrl(path);
            },
        },

    };
</script>

<style lang="scss">
    .note-list{
        .note-item{
            .head-info{
                font-size: $font-base;
                line-height: 40rpx;
            }
            .info-name{
                font-size: $font-lt;
            }
            .info-auth{
                font-size: $font-lt;
            }
            .info-img{

            }
            .line-box{
                background-color: $uni-bg-color-grey;
                .line-image{
                    width: 25%;
                    height: 155rpx;
                    border-radius: 4px;
                    overflow: hidden;
                }
                .line-info{
                    width: 72%;
                    height: 155rpx;
                    .title{
                        font-size: $font-lt;
                    }
                    .price-info{
                        font-size: $font-base;
                        color: $-tour-price-color;
                        .price{
                            font-size: $font-lg;
                        }
                    }
                    .buy-btn{
                        color: #FFFFFF;
                        font-size: $font-base;
                        padding: 5rpx 30rpx;
                        border-radius: 30rpx;
                    }
                }
            }
        }
    }
</style>
